<template>
  <a-modal
          :open="open"
          :footer="null"
          :closable="false"
          :width="420"
          style="left: 300px"
          :body-style="bodyStyleModal"
          @cancel="onclose"
  >
      <div class="header">
          <div class="title">您的耳朵是否存在以下情况(可多选)</div>
      </div>
      <div class="content">
          <div class="one">
              <a-button class="featureBtn" @click="this.arr+='1,'">听力减弱</a-button>
              <a-button class="featureBtn" @click="this.arr+='2,'">耳部堵塞感</a-button>
          </div>
          <div class="two">
              <a-button class="featureBtn" @click="this.arr+='3,'">耳鸣</a-button>
              <a-button class="featureBtn" @click="this.arr+='4,'">耳道痕痒</a-button>
          </div>
          <div class="three">
              <a-button class="featureBtn" @click="this.arr+='5,'">耳部疼痛</a-button>
          </div>
      </div>
      <div class="Btn">
          <a-button class="confirm" @click="check">确定</a-button>
          <a-button class="none" @click="onclose">以上都没有</a-button>
      </div>
  </a-modal>
</template>

<script>
export default {
    name: "UserSelfTest",
    data() {
        return {
            description: "用户自测",
            open: false,
            bodyStyleModal: {
                height:'436px',
            },
            arr:'',
        }
    },
    methods: {
        onclose() {
            this.open = false
        },
        check(){
            this.arr = '['+this.arr.slice(0,-1)+']'
            // console.log(this.arr)
            this.$emit('check',this.arr)
            this.arr = ''
            this.onclose()
        }
    }
}
</script>

<style scoped>
.header{
    display: flex;
    justify-content: center;
    align-items: center;
}
.title{
 font-size: 24px;
    width: 295px;
    text-align: center;
}
.content{
    margin-top: 20px;
    display: grid;
    gap: 20px;
}
.one{
    display: flex;
    justify-content: center;
    gap: 50px;
}
.two{
    display: flex;
    justify-content: center;
    gap: 50px;
}
.three{
    display: flex;
    justify-content: center;
    gap: 50px;
}
.featureBtn{
    background-color: #d5d5d5;
    border-radius: 30px;
    font-size: 24px;
    height: 50px;
    width: 156px;
}
.Btn{
    margin-top: 50px;
    display: grid;
    gap: 20px;
    justify-content: center;
}
.confirm{
    border-radius: 20px;
    height: 40px;
    width: 208px;
    font-size: 16px;
    background-color: #ff6666;

}
.none{
    border-radius: 20px;
    height: 40px;
    width: 208px;
    font-size: 16px;
    background-color: #00e4ff;
}

</style>